<template>
  <div id="nav-container" class="nav-bar">
    <div id="nav-content">
      <nav-bar-logo />
      <div id="nav-bar-right">
        <nav-bar-tab />
        <nav-bar-user-item/>
      </div>

    </div>
  </div>
</template>

<script>
  import NavBarLogo from 'views/home/NavBarLogo.vue';
  import NavBarTab from 'views/home/NavBarTab.vue';
  import NavBarUserItem from 'views/home/NavBarUserItem.vue';
  export default {
    name: 'NavBar',
    components: {
      NavBarLogo,
      NavBarTab,
      NavBarUserItem
    }
  }
</script>
<style>
  #nav-container {
    margin: 0px;
    padding: 0px;
    height: 58px;
  }

  #nav-content {
    border-bottom: 2px solid #0084f4;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* overflow:auto; */
  }

  #nav-bar-right {
    display: flex;
  }

</style>
